<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<img id="people" src="./image/people.png">
			<img id="zenduan" class="mui-pull-right" src="image/zenduan.png">
			<img id="title" src="image/title.png">
		</header>



		<div class="mui-content">
			<div class="mui-control-content mui-active" id="sub1">
				<style>
					#mui-content-sub1 {
						position: fixed;
						top: 44px;
					}
			
					.mui-control-content {
						background-color: white;
						min-height: 100vh;
						max-height: 300vh;
					}
				
					.mui-control-content .mui-loading {
						margin-top: 50px;
					}
			</style>
				<div id="mui-content-sub1" class="mui-content">
					<div id="slider" class="mui-slider">
						<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative">
							<a class="mui-control-item mui-active" href="#item1mobile">
								推荐
							</a>
							<a class="mui-control-item" href="#item2mobile">
								关注
							</a>
							<a class="mui-control-item" href="#item3mobile">
								选股
							</a>
							<a class="mui-control-item" href="#item4mobile">
								要闻
							</a>
							<a class="mui-control-item" href="#item5mobile">
								热门
							</a>
							<a class="mui-control-item" href="#item6mobile">
								诊股
							</a>
						</div>
						<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-2"></div>
						<div class="mui-slider-group">
							<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
								<div id="scroll1" class="mui-scroll-wrapper">
									<div class="mui-scroll">
										<div id="mui-slider-lunbo" class="mui-slider">
											<div class="mui-slider-group mui-slider-loop">
												<div class="mui-slider-item mui-slider-item-duplicate"><a href=""><img src="./image/swiper7.png"></a></div>
												<div class="mui-slider-item"><a href=""><img src="./image/swiper1.png"></a></div>
												<div class="mui-slider-item"><a href=""><img src="./image/swiper2.png"></a></div>
												<div class="mui-slider-item"><a href=""><img src="./image/swiper3.png"></a></div>
												<div class="mui-slider-item"><a href=""><img src="./image/swiper4.png"></a></div>
												<div class="mui-slider-item"><a href=""><img src="./image/swiper5.png"></a></div>
												<div class="mui-slider-item"><a href=""><img src="./image/swiper6.png"></a></div>
												<div class="mui-slider-item"><a href=""><img src="./image/swiper7.png"></a></div>
												<div class="mui-slider-item mui-slider-item-duplicate"><a href=""><img src="./image/swiper1.png"></a></div>
											</div>
											<div class="mui-slider-indicator">
												<div class="mui-indicator mui-active"></div>
												<div class="mui-indicator"></div>
												<div class="mui-indicator"></div>
												<div class="mui-indicator"></div>
												<div class="mui-indicator"></div>
												<div class="mui-indicator"></div>
												<div class="mui-indicator"></div>
											</div>
										</div>

										<div id="mui-slider-pannel" class="mui-slider">
											<div class="mui-slider-group">
												<div class="mui-slider-item"><a href=""><img src="./image/1.jpg"></a></div>
												<div class="mui-slider-item"><a href=""><img src="./image/2.jpg"></a></div>
												<div class="mui-slider-item"><a href=""><img src="./image/3.jpg"></a></div>
												<div class="mui-slider-item"><a href=""><img src="./image/4.jpg"></a></div>
											</div>
										</div>
										<div id="zhanjibang">
											<img src="image/zhanji.png" id="zhanjiimg" class="mui-pull-left">

											<div class="notice">
												<ul>
													<li>今日 金股预测提及****盘中上涨<strong style="color: red;">19.99%</strong></li>
													<li>01月31日 机构强势提及****盘中上涨<strong style="color: red;">2.31%</strong></li>
													<li>01月30日 机构强势提及****盘中上涨<strong style="color: red;">5.09%</strong></li>
													<li>01月29日 机构强势提及****盘中上涨<strong style="color: red;">2.72%</strong></li>
													<li>01月30日 机构强势提及****盘中上涨<strong style="color: red;">6.79%</strong></li>
												</ul>
											</div>
										</div>
										<script type="text/javascript">
											function noticeUp(obj, top, time) {
												$(obj).animate({
													marginTop: top
												}, time, function() {
													$(this).css({
														marginTop: "0"
													}).find(":first").appendTo(this);
												})

											}

											$(function() {
												// 调用 公告滚动函数
												setInterval("noticeUp('.notice ul','-35px',500)", 3000);

											});
										</script>
										<style type="text/css">
											div,
											ul,
											li {
												margin: 0;
												padding: 0
											}

											/*先初始化一下默认样式*/
											.notice {
												width: 300px;
												/*单行显示，超出隐藏*/
												height: 35px;
												/*固定公告栏显示区域的高度*/
												padding: 0 30px;
												padding-left: 10px;
												overflow: hidden;
												font-size: 13px;

											}

											.notice ul li {
												list-style: none;
												height: 10vw;
												/*以下为了单行显示，超出隐藏*/
												display: block;
												white-space: nowrap;
												text-overflow: ellipsis;
												overflow: hidden;
												padding-top: 4px;

											}
										</style>

										<ul id="mui-table-view-tuijian" class="mui-table-view">
											<div id="tuijian-title">
												<strong>推荐</strong>
												<span class="mui-icon mui-icon-arrowright mui-pull-right" style="color: #555555;font-size: 18px;margin-top: 1px;"></span>
												<p class="mui-pull-right">查看更多</p>
												
											</div>
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;">
													<img class="mui-media-object mui-pull-right" src="./image/list1.jpg">
													<div class="mui-media-body">
														<p class="mui-ellipsis-2">中办、国办印发文件：严格实施退市制度 对触及退市标准坚决予以退市</p>
														<p class="mui-ellipsis">要闻速递 &nbsp;26分钟前</p>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;">
													<img class="mui-media-object mui-pull-right" src="./image/list2.jpg">
													<div class="mui-media-body">
														<p class="mui-ellipsis-2">金股预测晚间版|A股探底回升 3股有望持续发力</p>
														<p class="mui-ellipsis">金股预测 &nbsp;两天前</p>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;">
													<img class="mui-media-object mui-pull-right" src="./image/list3.jpg">
													<div class="mui-media-body">
														<p class="mui-ellipsis-2">中信证券：万亿投放在即 2月慢涨延续</p>
														<p class="mui-ellipsis">要闻速递 &nbsp;2小时前</p>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;">
													<img class="mui-media-object mui-pull-right" src="./image/list4.jpg">
													<div class="mui-media-body">
														<p class="mui-ellipsis-2">春节档预售“厮杀战”开打！这部电影7小时创国产记录，哪些上市公司笑开花？</p>
														<p class="mui-ellipsis">要闻速递 &nbsp;3小时前</p>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;">
													<img class="mui-media-object mui-pull-right" src="./image/list5.jpg">
													<div class="mui-media-body">
														<p class="mui-ellipsis-2">【周末要闻汇总】上海：配合上交所稳步推进主板股票公开发行注册制</p>
														<p class="mui-ellipsis">要闻速递 &nbsp;3小时前</p>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;">
													<img class="mui-media-object mui-pull-right" src="./image/list6.jpg">
													<div class="mui-media-body">
														<p class="mui-ellipsis-2">新规来了！将这样影响你我生活</p>
														<p class="mui-ellipsis">要闻速递 &nbsp;8小时前</p>
													</div>
												</a>
											</li>
										</ul>
										
										<ul>
											<div id="tuijian-title" style="margin-top: 25px;">
												<strong>直播大厅</strong>
												<span class="mui-icon mui-icon-arrowright mui-pull-right" style="color: #555555;font-size: 18px;margin-top: 1px;"></span>
												<p class="mui-pull-right">进入大厅</p>
												
											</div>
											<div class="mui-card">
												<div class="mui-card-header mui-card-media">
													<img src="./image/qinlong.png" style="width: 40px;height: 40px;" />
													<div class="mui-media-body">
														擒龙笔记
														<p>发表于 1小时前</p>
														<img src="image/zhibo.png" style="width: 15vw;position: absolute;top: 15px;right: 20px;" >
													</div>
													
												</div>
												<div class="mui-card-content" style="padding: 5px;padding-left: 10px;padding-right: 10px;">
													<p style="color: #333; font-size: 17px;margin-top: 10px;">【低吸体系】《擒龙低吸体系》第四讲已经录制完毕! 铁粉先睹为快。</p>
													<img src="./image/qinlongbiji.png" alt="" style="width: 50vw;border-radius: 5px;margin-left: 5px;"/>
												</div>
												<div class="mui-card-footer">
													<img src="./image/pinglun.png" style="width: 20px;position: absolute;right: 37vw;">
													
													<image src="./image/dianzan.png" style="width: 18px;position: absolute;right: 24vw;"></image><p style="position: absolute;right: 20vw;top: 13px;">2</p>
													<img src="./image/share.png" style="width: 20px;position: absolute;right: 8vw;">
												</div>
											</div>
										</ul>
										<ul>
											<div class="mui-card">
												<div class="mui-card-header mui-card-media">
													<img src="./image/mishu.png" style="width: 40px;height: 40px;" />
													<div class="mui-media-body">
														直播小秘书
														<p>发表于 3小时前</p>
														<img src="image/zhibo.png" style="width: 15vw;position: absolute;top: 15px;right: 20px;" >
													</div>
									
												</div>
												<div class="mui-card-content" style="padding: 5px;padding-left: 10px;padding-right: 10px;">
													<p style="color: #333; font-size: 17px;margin-top: 10px;" class="mui-ellipsis-2">【收盘播报】A股三大指数今日集体收涨，迎来2月开门红，
													其中沪指收盘上涨0.64%，收报3505.28点，收复3500点；深证成指上涨1.36%，收报15024.24点；创业板指上涨0.99%，收报3159.99点。
													市场成交量萎缩，两市合计成交8567亿元，行业板块涨多跌少，次新股表现活跃。北向资金今日净买入34.59亿元。</p>
													
												</div>
												<div class="mui-card-footer">
													<img src="./image/pinglun.png" style="width: 20px;position: absolute;right: 37vw;">
													
													<image src="./image/dianzan.png" style="width: 18px;position: absolute;right: 24vw;"></image><p style="position: absolute;right: 20vw;top: 13px;">2</p>
													<img src="./image/share.png" style="width: 20px;position: absolute;right: 8vw;">
												</div>
											</div>
										</ul>
										
										<ul>
											<div class="mui-card">
												
												<div class="mui-card-content" style="padding: 15px;padding-left: 10px;padding-right: 10px;padding-bottom: 30px;">
													<img src="./image/jiazhiwajue.png" style="width: 90vw;">
													<p class="mui-ellipsis">【复盘视频】讲讲短线逻辑...</p>
													<img src="./image/pinglun.png" style="width: 20px;position: absolute;right: 37vw;">
													
													<image src="./image/dianzan.png" style="width: 18px;position: absolute;right: 24vw;"></image><p style="position: absolute;right: 20vw;bottom: 0px;">2</p>
													<img src="./image/share.png" style="width: 20px;position: absolute;right: 8vw;">
												</div>
												
											</div>
										</ul>
										
										<div id="luokuan">
											<img src="image/luokuan.png" id="luokuanimg">
										</div>
									</div>
								</div>
								<img src="./image/kefu.png" id="kefu" class="mui-pull-right">
								
							</div>
							<div id="item2mobile" class="mui-slider-item mui-control-content">
								<div id="scroll2" class="mui-scroll-wrapper">
									<div class="mui-scroll">
										<ul class="mui-table-view">
											<li class="mui-table-view-cell">
												<a class="mui-navigate-right">
													<img src="image/mylove.png" style="width: 20px;position: relative;top: 4px;">
													<strong style="font-size: 16px;">我的关注</strong>
													<span style="position: absolute;right: 35px;bottom: 12px;">管理全部</span>
												</a>
											</li>
										</ul>
										
									</div>
								</div>

							</div>
							<div id="item3mobile" class="mui-slider-item mui-control-content">
								<div id="scroll3" class="mui-scroll-wrapper">
									<div class="mui-scroll">
										<div class="mui-loading">
											<div class="mui-spinner">
											</div>
										</div>
									</div>
								</div>
							</div>
							<div id="item4mobile" class="mui-slider-item mui-control-content">
								<div id="scroll4" class="mui-scroll-wrapper">
									<div class="mui-scroll">
										<div class="mui-loading">
											<div class="mui-spinner">
											</div>
										</div>
									</div>
								</div>

							</div>
							<div id="item5mobile" class="mui-slider-item mui-control-content">
								<div id="scroll5" class="mui-scroll-wrapper">
									<div class="mui-scroll">
										<div class="mui-loading">
											<div class="mui-spinner">
											</div>
										</div>
									</div>
								</div>

							</div>
							<div id="item6mobile" class="mui-slider-item mui-control-content">
								<div id="scroll6" class="mui-scroll-wrapper">
									<div class="mui-scroll">
										<div class="mui-loading">
											<div class="mui-spinner">
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>

				</div>


				<script src="../js/mui.min.js"></script>
				<script>
					mui.init({
						swipeBack: false
					});
					(function($) {
						$('.mui-scroll-wrapper').scroll({
							indicators: true //是否显示滚动条
						});
						var html2 =
							'<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
						var html3 =
							'<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
						var item2 = document.getElementById('item2mobile');
						var item3 = document.getElementById('item3mobile');
						document.getElementById('slider').addEventListener('slide', function(e) {
							if (e.detail.slideNumber === 1) {
								if (item2.querySelector('.mui-loading')) {
									setTimeout(function() {
										item2.querySelector('.mui-scroll').innerHTML = html2;
									}, 500);
								}
							} else if (e.detail.slideNumber === 2) {
								if (item3.querySelector('.mui-loading')) {
									setTimeout(function() {
										item3.querySelector('.mui-scroll').innerHTML = html3;
									}, 500);
								}
							}
						});
						var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
						$('.mui-input-group').on('change', 'input', function() {
							if (this.checked) {
								sliderSegmentedControl.className =
									'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
								//force repaint
								sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
							}
						});
					})(mui);

					//轮播图自动播放
					mui.plusReady(function() {
						var slider = mui('#mui-slider-lunbo');
						slider.slider({
							interval: 2000
						})
					});
				</script>

			</div>
			<div class="mui-control-content" id="sub2">
				<div class="mui-input-row mui-input-range">
					<label>Range</label>
					<input type="range" min="0" max="100" value="50">
				</div>
			</div>

			<div class="mui-control-content" id="sub3">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="">
							<div class="mui-media-body">
								幸福
								<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="">
							<div class="mui-media-body">
								木屋
								<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="">
							<div class="mui-media-body">
								CBD
								<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<div class="mui-control-content" id="sub4">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">面板1</a>
						<div class="mui-collapse-content">
							<p>面板1子内容</p>
						</div>
					</li>
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">面板</a>
						<div class="mui-collapse-content">
							<p>面板2子内容</p>
						</div>
					</li>
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">面板3</a>
						<div class="mui-collapse-content">
							<p>面板3子内容</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="mui-control-content" id="sub5">
				<div class="mui-input-row mui-checkbox ">
					<label>Checkbox</label>
					<input name="Checkbox" type="checkbox" checked>
				</div>

			</div>
		</div>

		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#sub1">
				<span class="mui-icon iconfont icon-shouye"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#sub2">
				<span class="mui-icon iconfont icon-Icon-zhibozhong"></span>
				<span class="mui-tab-label">直播</span>
			</a>
			<a class="mui-tab-item" href="#sub3">
				<span class="mui-icon iconfont icon-vip"></span>
				<span class="mui-tab-label">vip</span>
			</a>
			<a class="mui-tab-item" href="#sub4">
				<span class="mui-icon iconfont icon-biaoqianA01_zhibo-68"></span>
				<span class="mui-tab-label">视频</span>
			</a>
			<a class="mui-tab-item" href="#sub5">
				<span class="mui-icon iconfont icon-hangqing"></span>
				<span class="mui-tab-label">行情</span>
			</a>
		</nav>

	</body>
</html>